<template>
  <div class="Login02_Box">
    <div class="loginBox">
      <div class="Box_L"></div>
      <div class="Box_R">
        <div class="welcome">
          <div class="logo"></div>
          <div class="LogoTitle">欢迎登录</div>
        </div>

        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <div style="margin-bottom: 5px">用户名</div>
          <el-form-item prop="pass" style="width: 500px; margin-left: -100px">
            <el-input
              type="text"
              v-model="ruleForm.pass"
              autocomplete="off"
              placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
          <div style="margin-bottom: 5px">密码</div>
          <el-form-item
            prop="checkPass"
            style="width: 500px; margin-left: -100px"
          >
            <el-input
              type="password"
              v-model="ruleForm.checkPass"
              autocomplete="off"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="submitForm('ruleForm')"
              style="width: 400px; margin-left: -100px"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "HomeView",
  data() {
    return {
      ruleForm: {
        username: "",
        password: "",
      },
      rules: {},
    };
  },
  mounted() {},
  methods: {},
};
</script>
<style lang='scss' scoped>
.Login02_Box {
  width: 100vw;
  height: 100vh;
  background: url("../assets/BackgroundImg/login2.png") no-repeat 0 0/100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .loginBox {
    width: 1001.51px;
    height: 480px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: white;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    .Box_L {
      width: 400px;
      height: 400px;
      background: url("../assets/BackgroundImg/login2BigLogo.png") no-repeat 0 0 /100%
        100%;
    }
    .Box_R {
      width: 400px;
      height: 400px;
      //background: skyblue;
      .welcome {
        width: 100%;
        height: 138px;
        // background: red;
        display: flex;
        .logo {
          width: 148px;
          height: 128px;
          background: #ccc;
        }
        .LogoTitle {
          width: 252px;
          height: 128px;
          // background: yellow;
          font-size: 47px;
          // color: white;
          font-weight: bold;
          display: flex;
          justify-content: space-around;
          align-items: center;
        }
      }
      .demo-ruleForm {
        margin-top: 30px;
      }
    }
  }
}
</style>